<template>
	<div>
		<div class="top">
			<div class="block">
				<span class="demonstration">日期：</span>
				<el-date-picker v-model="value1" type="date" placeholder="2022年08月20日">
				</el-date-picker>
			</div>
			<div class="diqu">
				<span>地区：</span>
				<el-select v-model="value" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="gongsi">
				<span>公司：</span>
				<el-select v-model="value" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="ying">
				<span>影院：</span>
				<input type="text" placeholder="请输入影院名称">
			</div>

		</div>
		<div class="content">
			<p class="four">影片信息</p>
			<div class="one">
				<span>影片名称： </span>
				<input type="text" placeholder=" 请输入影片关键字">
			</div>
			<div class="riqi">
				<div class="block">
					<span class="demonstration">上映日期：</span>
					<el-date-picker v-model="value1" type="date" placeholder="选择日期">
					</el-date-picker>
				</div>
			</div>
			<div class="zhi">
				<p class="app">影片制式：<button style="background-color: #7030a0; color:white; border:#7030a0; width:45px; height:25px; border-radius:2px">全部</button>
					<el-checkbox-group v-model="checkList">
						<el-checkbox label="数字"></el-checkbox>
						<el-checkbox label="3D"></el-checkbox>
						<el-checkbox label="IMAX"></el-checkbox>
						<el-checkbox label="CGS"></el-checkbox>
					</el-checkbox-group>
				</p>
				<p class="ap">影片属性：<button style="background-color: #7030a0; color:white; border:#7030a0; width:45px; height:25px; border-radius:2px">全部</button>
					<el-checkbox-group v-model="checkList">
						<el-checkbox label="国产"></el-checkbox>
						<el-checkbox label="国产合拍片"></el-checkbox>
						<el-checkbox label="进口"></el-checkbox>
						<el-checkbox label="分账片"></el-checkbox>
						<el-checkbox label="买断片"></el-checkbox>
						<el-checkbox label="特殊片"></el-checkbox>
						<el-checkbox label="纯港片"></el-checkbox>
						<el-checkbox label="纯台片"></el-checkbox>
						<el-checkbox label="电影节"></el-checkbox>
						<el-checkbox label="其他"></el-checkbox>
					</el-checkbox-group>
				</p>
				<p class="a">影片国别：<button style="background-color: #7030a0; color:white; border:#7030a0; width:45px; height:25px; border-radius:2px">全部</button>
					<el-checkbox-group v-model="checkList">
						<el-checkbox label="中国"></el-checkbox>
						<el-checkbox label="中国香港"></el-checkbox>
						<el-checkbox label="中国台湾"></el-checkbox>
						<el-checkbox label="中国澳门"></el-checkbox>
						<el-checkbox label="美国"></el-checkbox>
						<el-checkbox label="法国"></el-checkbox>
						<el-checkbox label="英国"></el-checkbox>
						<el-checkbox label="德国"></el-checkbox>
						<el-checkbox label="日本"></el-checkbox>
						<el-checkbox label="印度"></el-checkbox>
					</el-checkbox-group>
				</p>
				<p class="p">&nbsp;&nbsp;&nbsp;主类型：<button style="background-color: #7030a0; color:white; border:#7030a0; width:45px; height:25px; border-radius:2px">全部</button>
					<el-checkbox-group v-model="checkList">
						<el-checkbox label="爱情"></el-checkbox>
						<el-checkbox label="动画"></el-checkbox>
						<el-checkbox label="动作"></el-checkbox>
						<el-checkbox label="剧情"></el-checkbox>
						<el-checkbox label="科幻"></el-checkbox>
						<el-checkbox label="喜剧"></el-checkbox>
						<el-checkbox label="战争"></el-checkbox>
						<el-checkbox label="惊悚"></el-checkbox>
						<el-checkbox label="奇幻"></el-checkbox>
						<el-checkbox label="灾难"></el-checkbox>
						<el-checkbox label="纪录片"></el-checkbox>
					</el-checkbox-group>
				</p>
				<p class="pp">完整类型：<button style="background-color: #7030a0; color:white; border:#7030a0; width:45px; height:25px; border-radius:2px">全部</button>
					<el-checkbox-group v-model="checkList">
						<el-checkbox label="爱情"></el-checkbox>
						<el-checkbox label="青春"></el-checkbox>
						<el-checkbox label="女性"></el-checkbox>
						<el-checkbox label="同性"></el-checkbox>
						<el-checkbox label="纪录片"></el-checkbox>
						<el-checkbox label="竞技"></el-checkbox>
						<el-checkbox label="综艺大电影"></el-checkbox>
						<el-checkbox label="运动"></el-checkbox>
						<el-checkbox label="励志"></el-checkbox>
						<el-checkbox label="真人秀"></el-checkbox>
						<el-checkbox label="传记"></el-checkbox>
					</el-checkbox-group>
				</p>
				<p class="fp">投资规模：<button style="background-color: #7030a0; color:white; border:#7030a0; width:45px; height:25px; border-radius:2px">全部</button>
				<ul class="two">
					<li><a>小成本(1000万及以下)</a></li>
					<li><a>中小成本(1001-3000万)</a></li>
					<li><a>中成本(3001-5000万)</a></li>
					<li><a>中高成本(5001-8000万)</a></li>
					<li><a>高成本(8001-15000万)</a></li>
					<li><a>超高成本(15001万以上)</a></li>
					
				</ul>
				</p>
				<p class="ff">累计票房：<button style="background-color: #7030a0; color:white; border:#7030a0; width:45px; height:25px; border-radius:2px">全部</button>
				<ul class="three">
					<li><a>5亿元以上</a></li>
					<li><a>2-5亿元</a></li>
					<li><a>1-2亿元</a></li>
					<li><a>5000万-1亿元</a></li>
					<li><a>1000-5000万元</a></li>
					<li><a>1000万以下</a></li>
					<li><a>自定义</a></li>
				</ul></p>
			</div>
		</div>
		<div class="container">
			<div class="two">
				<p>相关公司</p>
				<span>制作公司：</span>
				<input type="text" placeholder="请输入制作公司名称">
				<span>发行公司：</span>
				<input type="text" placeholder="请输入发行公司名称">
				<span>出品公司：</span>
				<input type="text" placeholder="请输入出品公司名称">
			</div>
		</div>
		<div class="middle">
			<button>全天</button>
			<button>黄金场</button>
			<div class="three">
				<span>影片详情</span>
				<button>票房</button>
				<button>场次</button>
				<button>人数</button>
				<button>上座率</button>
			</div>
		</div>
		<div class="yingpian">
			<span>影片票房</span>
			<el-table :data="yp" style="width: 100%">
				<el-table-column prop="Irank" label="排片" width="100">
				</el-table-column>
				<el-table-column prop="MovieName" label="影片名称" width="180">
				</el-table-column>
				<el-table-column prop="BoxOffice" label="当前票房(万)" width="180">
				</el-table-column>
				<el-table-column prop="ReleaseDate" label="上映日期" width="180">
				</el-table-column>
				<el-table-column prop="TotalBoxOffice" label="累计票房(万)" width="180">
				</el-table-column>
				<el-table-column prop="ShowCount" label="当前场次" width="180">
				</el-table-column>
				<el-table-column prop="TotalBoxOffice" label="当前人次(万)" width="180">
				</el-table-column>
				<el-table-column prop="BoxOfficePercent" label="票房占比" width="180">
				</el-table-column>
				<el-table-column prop="ReleaseDay" label="累计上映天数" width="180">
				</el-table-column>
				<el-table-column prop="ShowDay" label="天数" width="180">
				</el-table-column>
				<el-table-column prop="ShowDay" label="黄金场票房(万)" width="180">
				</el-table-column>
				<el-table-column prop="HjShowCountPercent" label="黄金场票房占比" width="180">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import {
		GetYppf,
		GetYp
	} from "@/api/yppf.js"
	export default {
		data() {
			return {
				yppf: [],
				yp: {},
				checkList: ['选中且禁用', '复选框 A'],
				tabPosition: 'left',
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
				},
				value1: '',
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '',
			};
		},

		created() {
			console.log("---------------------------------");
			GetYppf({
				r: 0.8116360512035317,
			}).then(res => {
				console.log(res.data.data);
				this.yppf = res.data.data
			})
			GetYp({
				r: 0.26543965834917427,
				datetype: "Day",
				date: "2022-08-20",
				sdate: "2022-08-20",
				edate: "2022-08-20",
				bserviceprice: 1,
				columnslist: "100,102,103,119,105,107,109,106,112,129,142,143,163,164,165",
				pageindex: 1,
				pagesize: 20,
				order: 103,
				ordertype: "desc",
			}).then(res => {
				console.log('123', res.data.data);
				this.yp = res.data.data.table1
			})
		}
	}
</script>

<style>
	.container .two p{
		color: black;
		font-size: 14px;
		font-weight: 700;
	}
	.content .four{
		color: black;
		font-size: 14px;
		font-weight: 700;
	}
	.content .zhi .fp .two li{
		margin-right: 20px;
	}
	.content .zhi .ff .three li{
		margin-right: 20px;
	}
	.content .zhi .fp .two{
		position: absolute;
		left: 110px;
		top: 220px;
		display: flex;
		flex-wrap: nowrap;
		list-style: none;
		
	}
	.content .zhi .ff .three{
		position: absolute;
		left: 110px;
		top: 179px;
		display: flex;
		flex-wrap: nowrap;
		list-style: none;
		
	}
	.content p{
		color: #656565;
		font-size: 13px;
	}
	.content .zhi .pp .el-checkbox-group{
		position: absolute;
		left: 145px;
		top: 155px;
	}
	.content .zhi .p .el-checkbox-group{
		position: absolute;
		left: 145px;
		top: 117px;
	}
	.content .zhi .a .el-checkbox-group{
		position: absolute;
		left: 145px;
		top: 80px;
	}
	.content .zhi .ap .el-checkbox-group{
		position: absolute;
		left: 145px;
		top: 40px;
	}
	.content .zhi .app .el-checkbox-group{
		position: absolute;
		left: 145px;
		top: 0px;
	}
	.content .zhi{
		position: relative;
		margin-top: 5px;
	}
	.content .riqi .demonstration {
		padding-right: 5px;
		line-height: 32px;
		color: #6b6276;
		font-size: 13px;
	}
	.container .two input{
		margin-right: 20px;
	}
	.container .two input,
	.content .one input {
		padding-right: 22px;
		color: #656565;
		height: 28px;
		line-height: 28px;
		display: inline-block;
		border-radius: 2px;
		border: 1px solid #dcdcdc;
	}
	
	
	.container .two span,
	.content .one {
		padding-right: 5px;
		line-height: 32px;
		color: #6b6276;
		font-size: 13px;
		margin-bottom: 5px;
	}

	.el-input__icon {
		height: 100%;
		width: 25px;
		text-align: center;
		transition: all .3s;
		line-height: 30px;
	}

	.el-input__inner {
		height: 30px;
	}

	.echart {
		height: 500px;
	}

	.top {
		position: relative;
	}

	.diqu {
		position: absolute;
		left: 27%;
		top: 0%;
	}

	.gongsi {
		position: absolute;
		left: 54%;
		top: 0%;
	}

	.ying {
		position: absolute;
		left: 85%;
		top: 0%;
	}
</style>
